import React from 'react'
import {Col, Row} from "antd";

import {WeaLocaleProvider,WeaInput,WeaCheckbox,WeaInputNumber} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export default class AddExtends extends React.Component{

    componentWillMount(){
        const {setSetting,setId,defaultValue={}} = this.props
        const {e7Bgi,e7Silder} = defaultValue
        if(setId == -1){
            setSetting({
                color: "#999",
                e7Bgi,
                e7Silder,
                showQrcode: true,
                qrcodeValidTime: 30,
                defaultQrcode: false,
                onlyQrcode : false,
            })
        }else{
            setSetting({'addVisiable':true})
        }
    }

    render(){
        const {setting,setSetting} = this.props
        const {showQrcode,qrcodeValidTime,defaultQrcode,onlyQrcode} = setting


        return (
            <div>

                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@21tk4c`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gw5y7p`} span={6} >
                            <div className="item-title">{getLabel(387917,'显示二维码')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hrbqag`} span={18}>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@twy0fr`} value={showQrcode} onChange={value => setSetting({showQrcode:value == '1'})}/>
                        </Col>
                    </Row>
                </div>
                {
                    showQrcode == true ? (
                        <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@8x37tp`}>
                            <div className="set-item">
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ncnwgx`} type="flex" middle="middle">
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zjz5zy`} span={6} >
                                        <div className="item-title">{getLabel(512584,'默认扫码登录')} :</div>
                                        <div className="middle-box"></div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@70abt6`} span={18}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@pvsg4c`} value={defaultQrcode} onChange={value => {const isCheck = value == '1'; if (isCheck) {setSetting({defaultQrcode:isCheck})} else {setSetting({defaultQrcode:isCheck, onlyQrcode:isCheck})}}}/>
                                    </Col>
                                </Row>
                            </div>
                            <div className="set-item">
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1fvzyc`} type="flex" middle="middle">
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hl4hts`} span={6} >
                                        <div className="item-title">{getLabel(512585,'只允许扫码登录')} :</div>
                                        <div className="middle-box"></div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@23qoe2`} span={18}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@9046wq`} value={onlyQrcode} onChange={value => {const isCheck = value == '1'; if (isCheck) {setSetting({onlyQrcode:isCheck, defaultQrcode:isCheck})} else {setSetting({onlyQrcode:isCheck})}}}/>
                                    </Col>
                                </Row>
                            </div>
                            <div className="set-item">
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mgdqy5`} type="flex" middle="middle">
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pje5l5`} span={6} >
                                        <div className="item-title">{getLabel(515971,'二维码有效时间（秒）')} :</div>
                                        <div className="middle-box"></div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@awcbgy`} span={18}>
                                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@chxv8s`} style={{width:60}} min={0} value={qrcodeValidTime} onChange={value => setSetting({qrcodeValidTime:value})}/>
                                    </Col>
                                </Row>
                            </div>
                        </React.Fragment>
                    ) : null
                }

            </div>
        )
    }
}